<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.empNo" placeholder="subject" style="width: 200px;" class="filter-item" />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="fechData">
        查询
      </el-button>
    </div>
    <el-table :data="personlist" border fit highlight-current-row style="width: 80%">
      <el-table-column align="center" label="工号" prop="empNo" />
      <el-table-column align="center" label="姓名" prop="userName" />
      <el-table-column align="center" label="部门" prop="dept.deptName" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="getUser(scope)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fechData" />
    <el-dialog :visible.sync="dialogVisible" title="查看">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工号">
              <el-input v-model="user.empNo" :readonly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="user.userName" :readonly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门">
              <el-input v-model="user.dept.deptName" :readonly="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-form-item label="角色" />
          </el-col>
          <el-col v-for="userrole in roles" :key="userrole" :span="4">

            <el-button type="primary" size="small">{{ userrole.roleName }}</el-button>
          </el-col>
        </el-row>
        <el-row>

          <el-form-item label="权限">
            <el-tree
              ref="tree"
              :check-strictly="checkStrictly"
              :data="routesData"
              :props="defaultProps"
              default-expand-all
              show-checkbox
              node-key="id"
              class="permission-tree"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>

      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getuserlist } from '@/api/user'
import path from 'path'
import { deepClone } from '@/utils'
import waves from '@/directive/waves'
import { getRoutes, fetchMenuIdsByUser } from '@/api/role'
import { filterMenuadmin, convertTreeadmin } from '@/router'
import Pagination from '@/components/Pagination'
const defaultRole = {
  key: '',
  name: '',
  description: '',
  status: '',
  routes: []

}
const rowUser = {
  empNo: '',
  userId: '',
  userName: '',
  dept: { deptName: '' }
}
export default {
  name: '',
  components: { Pagination },
  directives: { waves },

  data() {
    return {
      role: Object.assign({}, defaultRole),
      total: 20,
      user: Object.assign({}, rowUser),
      dialogVisible: false,
      routes: [],
      checkStrictly: false,
      roles: [],
      // 参数条件
      listQuery: {
        page: 1,
        limit: 20,
        empNo: ''
      },
      defaultProps: {
        children: 'children',
        label: 'title',
        id: 'id'
      },
      personlist: [],

      dialogFormVisible: false,
      dialogPvVisible: false,
      downloadLoading: false
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    this.fechData()
    this.getRoutes()
  },
  methods: {
    async fechData() {
      const res = await getuserlist(this.listQuery)
      this.personlist = res.userList
      this.total = res.total
    },
    async getUser(scope) {
      this.dialogVisible = true
      this.user = deepClone(scope.row)
      const res = await fetchMenuIdsByUser({ 'userId': scope.row.userId })
      const menus = res.data.menus
      this.roles = res.data.roles
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(menus)
        this.checkStrictly = false
      })
    },
    async confirmRole() {
      this.dialogVisible = false
    },
    async getRoutes() {
      const res = await getRoutes()

      const menus = filterMenuadmin(res.data.menus)
      // console.log(accessedRoutes)
      // const menus = await store.dispatch('permission/getmenus', res.data.menus)
      convertTreeadmin(menus, res.data.menus)
      // console.log(menus)
      this.serviceRoutes = menus
      this.routes = menus
      this.routes = this.generateRoutes(menus)
      // console.log(this.routes)
    },
    generateRoutes(routes, basePath = '/') {
      const res = []

      for (const route of routes) {
        // skip some route
        if (route.hidden) { continue }
        // console.log(route)
        /*    const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)

        if (route.children && onlyOneShowingChild && !route.alwaysShow) {
          route = onlyOneShowingChild
        } */

        const data = {
          path: path.resolve(basePath, route.path),
          title: route.meta && route.meta.title,
          id: route.id
        }

        // recursive child routes
        if (route.children) {
          data.children = this.generateRoutes(route.children, data.path)
        }
        res.push(data)
      }
      return res
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
